<template>
 <div style="min-height: calc(100vh - 84px);height: 100%;">
  <div >
    <el-row >
      <el-col :xs="24" :sm="24" :lg="6" >
        <div class="layout-all">
        <h3>组件模板（点击模板区域进行编辑）</h3>
        <!-- 头部搜索栏固定 -->
        <div style="width:277px;text-align:center;padding-left: 2px;">
          <div class="img-box" @click="showMask(tpl_options[0].mask)">
            <img class="tpl-img" :src="tpl_options[0].url" alt="">
            <div v-if="mask == tpl_options[0].mask" class="mask">
              <i class="iconfont icon-bianji" style="font-size:20px;" />
              <span style="font-size:18px;">{{ tpl_options[0].title }}</span>
            </div>
          </div>
        </div>
        <!-- 中间部分滚动 -->
        <div class="layout-scroll layout-scrollbar">
          <div class="layout-scroll-views">
            <div v-for="(item,index) in tpl_options.slice(1,12)" :key="index" :class="item.type == 1 ? 'img-box': 'img-box-half'" @click="showMask(item.mask)">
              <img class="tpl-img" :src="item.url" alt="">
              <div v-if="mask == item.mask" class="mask">
                <i class="iconfont icon-bianji" style="font-size:20px;" />
                <span style="font-size:18px;">{{ item.title }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部菜单栏固定 -->
        <div style="width:275px;text-align:center;padding-left: 2px;">
          <div class="img-box" @click="showMask(tpl_options[12].mask)">
            <img class="tpl-img" :src="tpl_options[12].url" alt="">
            <div v-if="mask == tpl_options[12].mask" class="mask">
              <i class="iconfont icon-bianji" style="font-size:20px;" />
              <span style="font-size:18px;">{{ tpl_options[12].title }}</span>
            </div>
          </div>
        </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="18">
        <h3>编辑模板</h3>
        <div class="layout-scroll-right layout-scrollbar">
          <!-- <el-scrollbar style="height:720px; padding-bottom:20px;" > -->
          <!-- 列表页 -->
          <div v-if="edit == ''">
            <!-- 头部搜索栏 -->
            <!-- <search-edit v-if="mask == 1" /> -->
            <!-- 分类 -->
            <classify-edit v-if="mask == 2" />
            <!-- 轮播图 -->
            <banner-edit v-else-if="mask == 3" />
            <!-- 首页导航 -->
            <nav-edit v-else-if="mask == 4" cat_name="首页导航"/>
            <!-- 广告导航 -->
            <nav-edit v-else-if="mask == 5" cat_name="首页"/>
            <!-- 秒杀 -->
            <special-offer-edit v-else-if="mask == 6" type="1" />
            <!-- 团购 -->
            <group-buy-edit v-else-if="mask == 7" />
            <!-- 特价 -->
            <special-offer-edit v-else-if="mask == 8" type="0" />
            <!-- 活动 -->
            <activity-edit v-else-if="mask == 12" />
            <!-- 底部菜单 -->
            <tabbar-edit v-else-if="mask == 13" />
          </div>
          <!-- 编辑页 -->
          <!-- 编辑分类 -->
          <classify-form v-else-if="edit == 2"></classify-form>
          <!-- 编辑轮播图 -->
          <banner-form v-else-if="edit == 3" />
          <!-- 编辑导航 -->
          <nav-form v-else-if="edit == 4" />
          <!-- 编辑特价、秒杀 -->
          <special-offer-form v-else-if="edit == 6" :is_show="true"/>
          <!-- 编辑团购 -->
          <group-buy-form v-else-if="edit== 7" />
          <!-- 编辑活动 -->
          <activity-form v-else-if="edit == 12" />
          <!-- 编辑底部菜单 -->
          <tabbar-form v-else-if="edit == 13" />

          <!-- </el-scrollbar> -->
        </div>
      </el-col>
    </el-row>
  </div>
  </div>
</template>

<script>
// import $ from 'jquery'
import components from './index_custom_components'
export default {
  name:'index_ui_home',
  computed:{
    edit(){
      console.log(this.$store.state.user.edit)
      return this.$store.state.user.edit
    },
    editId(){
      return this.$store.state.user.editId
    },
  },
  components: {
    //轮播图
    BannerEdit: components.BannerEdit,
    BannerForm: components.BannerForm,
    //分类
    ClassifyEdit: components.ClassifyEdit,
    ClassifyForm: components.ClassifyForm,
    //导航
    NavEdit: components.NavEdit,
    NavForm: components.NavForm,
    //广告导航（弃用）使用上面导航
    // IndexAdEdit: components.IndexAdEdit,
    //搜索
    SearchEdit: components.SearchEdit,
    //特价商品
    SpecialOfferEdit: components.SpecialOfferEdit,
    SpecialOfferForm: components.SpecialOfferForm,
    //团购商品
    GroupBuyEdit: components.GroupBuyEdit,
    GroupBuyForm: components.GroupBuyForm,
    //活动区
    ActivityEdit: components.ActivityEdit,
    ActivityForm: components.ActivityForm,
    //底部菜单
    TabbarEdit: components.TabbarEdit,
    TabbarForm: components.TabbarForm
  },
  data() {
    return {
      mask: '',
      menu_arr: {},
      // 模板图片列表
      tpl_options: [
        { url: require('../../image/jt_01.png'), mask: 1, type: 1, title: '头部' },
        { url: require('../../image/jt_02.png'), mask: 2, type: 1, title: '分类' },
        { url: require('../../image/jt_03.png'), mask: 3, type: 1, title: '轮播' },
        { url: require('../../image/jt_04.png'), mask: 4, type: 1, title: '首页导航' },
        { url: require('../../image/jt_05.png'), mask: 5, type: 1, title: '广告导航' },
        { url: require('../../image/jt_06.png'), mask: 6, type: 2, title: '秒杀',menu:145 },
        { url: require('../../image/jt_07.png'), mask: 7, type: 2, title: '团购' ,menu:151},
        { url: require('../../image/jt_08.png'), mask: 8, type: 2, title: '特价' },
        { url: require('../../image/jt_09.png'), mask: 9, type: 2, title: '新品' },
        { url: require('../../image/jt_10.png'), mask: 10, type: 2, title: '直播' ,menu:229},
        { url: require('../../image/jt_11.jpg'), mask: 11, type: 2, title: '排行' },
        { url: require('../../image/jt_12.png'), mask: 12, type: 1, title: '活动区' },
        { url: require('../../image/jt_13.jpg'), mask: 13, type: 1, title: '底部菜单' }
      ]
    }
  },
  mounted() {
    
  },
  methods: {
    // 点击展示遮罩层
    showMask(num) {
      if(this.tpl_options[num-1].menu!=undefined){
        const that=this
        this.get_power(that.tpl_options[num-1].menu,function(){
          that.$store.commit('user/SET_EDIT','')
          that.mask = num
        })
      }else{
        this.$store.commit('user/SET_EDIT','')
        this.mask = num
      }
      
    },
    get_power(menu_id,fun){
      this.get("/admin/Extend/get_power", {menu_id:menu_id}, "POST").then((e) => {
        fun()
      })
    }
  }
}
</script>

<style>
.layout-scroll {
    width: 300px;
    height: 567px;
    padding-right: 24px;
    padding-left: 2px;
    overflow-x: hidden;
    overflow-y: auto;
}
.layout-scroll-right {
    width: 100%;
    /* height: 670px; */
    overflow-x: hidden;
    overflow-y: auto;
}
.layout-scroll-views {
  text-align:center;
    width: 275px;
    min-height: 667px;
    padding-bottom: 40px;
    padding-top: 2px;
    background-color: #fff;
}
.layout-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.layout-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #999;
}
.layout-scrollbar::-webkit-scrollbar-track {
    background-color: #ddd;
    box-shadow:inset 0 0 2px #333;
    -webkit-box-shadow: inset 0 0 2px #333;
    border-radius: 4px;
}
.img-box {
  position: relative;
  width:100%
}
.img-box-half {
  display: inline-block;
  position: relative;
  width:48%
}
.mask {
 background-color: rgb(0, 0, 0);
 opacity: 0.5;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 text-align:center;
 color:#ffffff;
}
.mask::before{
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}

.layout-all {
  margin: 10px;
}

.tpl-img {
  /* position:absolute; */
  width:100%;
}
</style>
